CSS lay-out met flexbox

Flexbox staat voor Flexible Box. Met deze lay-outmodule voor CSS kan je adaptieve ontwerpen (responsive design) maken. Al naargelang de grootte van het scherm en de richting (horizontaal, vertikaal) ervan, worden website-elementen automatisch:

gerangschikt;
een hoogte en een breedte toegekend;

Sinds het begin van internet hebben webontwerpers verschillende manieren gebruikt om afbeeldingen, tekst en andere inhoud te plaatsen waar ze wilden. Deze waren echter ofwel niet geschikt voor responsive design (bijvoorbeeld het table element), waren in de eerste plaats nooit bedoeld als layout-tool (het attribuut float), lieten je niet toe om gelijke hoogtes te definiëren voor elementen ( het inline-block attribuut).

Visuele voorstelling flexbox eigenschappen

Voorbereiding

Maak een map met de naam labo7 en plaats daarin flexbox-leren.html.
Voor deze les gebruiken we interne CSS.

Plak de volgende code in flexbox-leren.html:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
        }

        .item-container {
            width: 30rem;
            margin: 3rem;
            padding: 2rem;
            background-color: lightcoral;
        }

        .item {
            background-color: #fff;
            margin: 0;
            padding: 0;
            width: 8rem;
            height: 10rem;
            font-weight: bold;
            font-family: sans-serif;
            font-size: 5rem;
            color: lightseagreen;
            border: solid #9a9a9a 1px;
        }
    </style>
    <title>Flexbox leren</title>
</head>
<body>
    <section class="item-container" id="item-container">
        <article class="item">a</article>
        <article class="item">b</article>
        <article class="item">c</article>
        <article class="item">d</article>
        <article class="item">e</article>
        <article class="item">f</article>
        <article class="item">g</article>
        <article class="item">h</article>
        <article class="item">i</article>
        <article class="item">j</article>
        <article class="item">k</article>
        <article class="item">l</article>
        <article class="item">m</article>
    </section>
</body>
</html>

Waarvoor dient flexbox?

Met Flexbox kan je elementen lay-outen in een container. Je kan ze:

op een bepaalde plaats zetten;
in een bepaalde volgorde;
uitlijnen;
de ruimte er tussen (en / of rond) verdelen, ongeacht hun grootte;

M.a.w. je kan die elementen in de container letterlijk flexibel maken, ze kunnen:

gerekt en gekrompen worden tot ze passen in de hen toegekende ruimte;
worden gerangschikt in verhouding tot elkaar;
alle beschikbare ruimte tussen of rond hen kan worden verdeeld op basis van een opgegeven verhouding;

Hoe werkt het?

De flex container

display: flex
Je stelt een html element als een flex container door de display eigenschap in te stellen op flex:

.item-container {
    width: 30rem;
    margin: 3rem;
    padding: 2rem;
    display: flex;
    background-color: lightcoral;
}

Alle html elementen in deze container zijn dan automatisch flex-items. We schrijven hiervoor de volgende stijlregel:

.item {
    background-color: #fff;
    margin: 0;
    padding: 0;
    width: 8rem;
    height: 10rem;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 5rem;
    color: lightseagreen;
    border: solid #9a9a9a 1px;
}

flex-direction
Je kan de elementen in een container lay-outen in twee richtingen, de zogenaamde flex richtingen:
1. horizontaal: standaard wordt de flex-direction eigenschap ingesteld op row. De flex-items worden horizontaal van links naar rechts op 1 flexlijn geplaatst: met dit als resultaat:
  
  flexbox - flex-direction row no overflow
  
  als je de overflow eigenschap instelt op auto zie je dat de flex items op 1 flexlijn getoond worden, de flex-items die buiten de container vallen kan je door horizontaal te scrollen zichtbaar maken:
```
.item-container {
    width: 30rem;
    margin: 3rem;
    padding: 2rem;
    display: flex;
    background-color: lightcoral;
    overflow: auto;
}
```
  met dit als resultaat:
  
  flexbox - flex-direction row with overflow auto
2. verticaal: stel de flex-direction eigenschap in op column:
```
.item-container {
    width: 30rem;
    margin: 3rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    background-color: lightcoral;
    overflow: auto;
}
```
  met dit als resltaat:
  
  flexbox - flex-direction: column
flex-wrap
Als je de flex-items niet wilt laten doorlopen op 1 flexlijn buiten de container moet je de flex-wrap op wrap instellen. Standaard staat die ingesteld op nowrap. We stellen de flex-direction eigenschap terug in op row en de flex-wrap op wrap:
```
.item-container {
    width: 30rem;
    margin: 3rem;
    padding: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: lightcoral;
    overflow: auto;
}
```
Met dit als resultaat:

flexbox - flex-wrap wrap

Wat gebeurt er als we flex-wrap instellen op wrapen flex-direction op column?
```
.item-container {
    width: 30rem;
    margin: 3rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: lightcoral;
    overflow: auto;
}
```
Dat geeft net hezelfde resultaat als hierboven. Alle items worden op 1 vertikale flexlijn gezet en niet 'gewrapt' naar een volgende flexlijn:

flexbox - flex-direction column flex-wrap wrap

Dat komt omdat we geen hoogte aan de flex-container hebben toegekend. Als we de height eigenschappen instellen zal je zien dat de flex-items op meer dan 1 vertikale flexlijn geplaatst zullen worden:
```
.item-container {
    width: 30rem;
    height: 55rem;
    margin: 3rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: lightcoral;
    overflow: auto;
}
```
Met dit als resultaat:

flexbox flex-direction: column flex-wrap: wrap

flex-flow
Je kan de twee voorgaande eigenschappen, flex-direction en flex-wrap combineren in 1 eigenschap:

.item-container {
    width: 30rem;
    height: 55rem;
    margin: 3rem;
    padding: 2rem;
    display: flex;
    flex-flow: column row;
    background-color: lightcoral;
    overflow: auto;
}

witruimte
De flex-items worden over de flexlijnen verdeeld, als een flex-item niet meer op de flexlijn past, wordt die naar een volgende flexlijn verplaatst. De overgegebleven ruimte op de flexlijn wordt gevuld met wit. Het einde van de flexlijn is onderaan wanneer flex-direction ingesteld staat op column, staat rechts als flex-direction ingesteld staat op row.
We hebben nu de height van de container ingesteld op 55rem. Hoogte en breedte zijn ingesteld. Wat gebeurt er met de witruimte?
1. De justify-content eigenschap lijnt flex items uit langs de hoofdas van de huidige flexlijn van de flex container, dus in dezelfde richting als flex. Dit gebeurt pas nadat alle flexibele lengtes en alle auto marges zijn ingesteld.
```
justify-content: flex-start | flex-end | center | space-between | space-around
```
  flexbox - justify-content
2. De align-content eigenschap lijnt de flexlijnen uit binnen de flex container als er extra ruimte beschikbaar is in de dwarsas, vergelijkbaar met hoe justify-content afzonderlijke items uitlijnt over hoofdas. Deze eigenschap heeft geen effect als de flex container slechts één enkele lijn heeft. Als flex-direction op column is ingesteld wisselen hoofdas en dwarsas van rol.
```
align-content: flex-start | flex-end | center | space-between | space-around | stretch
```
  flexbox - align-content
3. De eigenschap align-items specificeert de standaarduitlijning voor items in de flexibele container.
```
align-items: flex-start | flex-end | center | baseline | stretch
```
  flexbox - align-items

Flex-items

Met de flex-grow eigenschap stel je de flex-groei-factor van een flex-item in. Een flex-groei-factor is een <getal> dat bepaalt hoeveel het flex item groter wordt ten opzichte van de rest van de flex items in de flex container wanneer positieve vrije ruimte wordt verdeeld.

flexbox - flex-grow
De flex-shrink eigenschap stelt de flex-krimpfactor van een flex-item in. De flex-krimpfactor is een <getal> dat aangeeft hoeveel een flex item ten opzichte van de andere flex itemns in de flexibele container krimpt wanneer negatieve vrije ruimte wordt verdeeld. De flex-krimpfactor wordt vermenigvuldigd met de flex basis (zie flex-basis) bij de verdeling van negatieve ruimte. De initiële waarde is nul (0), wat betekent dat standaard de items niet krimpen, en negatieve getallen zijn ongeldig.
De flex-basis eigenschap neemt de waarde van de width eigenschap over, en stelt de flex basis in: de initiële hoofdafmeting (zie Een flexibele lay-out maken) van het flex item, voordat de vrije ruimte wordt verdeeld op basis van de flex factoren (zie De flex-grow eigenschap en De flex-shrink eigenschap).
De align-items eigenschap stelt de standaard uitlijning in voor alle items van de flex container. De align-self eigenschap maakt het mogelijk deze standaard uitlijning te overschrijven voor de afzonderlijke flex items.
```
align-self: auto | flex-start | flex-end | center | baseline | stretch
```
Flex items worden standaard weergegeven in hun natuurlijke volgorde, namelijk in dezelfde volgorde als in het brondocument. Met de order eigenschap kan je natuurlijke volgorde veranderen.
```
order: <integer>
```
flexbox - order

2022-05-20 16:54:47

Titel